<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心 - StudentHub</title>
    <link rel="shortcut icon" href="/public/favicon.ico" type="image/x-icon">
    <!-- 引入 Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入 Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入 Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- 引入 Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>

    <!-- 配置 Tailwind -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36D399',
                        neutral: {
                            100: '#F8FAFC',
                            200: '#E2E8F0',
                            300: '#CBD5E1',
                            400: '#94A3B8',
                            500: '#64748B',
                            600: '#475569',
                            700: '#334155',
                            800: '#1E293B',
                            900: '#0F172A',
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03)',
                        'card-hover': '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
                    }
                },
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-balance {
                text-wrap: balance;
            }
            .animate-fade-in {
                animation: fadeIn 0.5s ease-in-out;
            }
            .animate-slide-up {
                animation: slideUp 0.5s ease-out;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideUp {
            from { transform: translateY(20px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
    </style>

    <style>
        .modal-backdrop {
            z-index: 1040 !important;
        }

        .modal-content {
            z-index: 1050 !important;
        }

        .content-cell {
            max-width: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .article-card {
            transition: all 0.3s ease;
        }

        .article-card:hover {
            transform: translateY(-5px);
        }

        .nav-pills .nav-link.active {
            background-color: #165DFF !important;
            color: white !important;
        }

        .nav-pills .nav-link {
            color: #475569 !important;
        }
    </style>
</head>
<body class="font-inter bg-neutral-100 text-neutral-800">
<!-- 导航栏 -->
<header class="sticky top-0 z-50 bg-white shadow-sm transition-all duration-300" id="navbar">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <div class="flex items-center space-x-2">
            <a href="/qian/home.html" class="text-primary font-bold text-xl flex items-center">
                <i class="fa fa-graduation-cap mr-2"></i>
                <span>StudentHub</span>
            </a>
        </div>

        <nav class="hidden md:flex items-center space-x-6">
            <a href="/qian/home.html" class="text-primary font-medium">首页</a>
            <!-- 后台管理按钮 -->
            <a href="/hou/index.html" id="adminButton" class="hidden bg-primary text-white px-3 py-1 rounded font-medium hover:bg-primary/90 transition-colors">
                后台管理
            </a>
        </nav>

        <div class="flex items-center space-x-4">
            <!-- Logout Button -->
            <button id="logoutButton" class="text-red-500 hover:text-red-700 transition-colors font-medium hidden md:block">
                退出登录
            </button>
            
            <div class="relative hidden md:block">
                <label>
                    <input type="text" placeholder="搜索课程、学习资料..." class="pl-10 pr-4 py-2 rounded-full bg-neutral-100 focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all w-48 focus:w-64">
                </label>
                <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400"></i>
            </div>

            <div class="relative group">
                <a href="/qian/user-center.html" class="w-4 h-4 rounded-full overflow-hidden border-2 border-white hover:border-primary transition-all">
                    <!-- Server-side code should replace the src with the user's avatar from session -->
                    <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="w-full h-full object-cover rounded-full" style="width: 40px; height: 40px;">
                </a>

                <div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 z-10 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform group-hover:translate-y-0 translate-y-2">
                    <a href="user.html" class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100">
                        <i class="fa fa-user-o mr-2"></i> 个人主页
                    </a>
                    <a href="#" class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100">
                        <i class="fa fa-cog mr-2"></i> 设置
                    </a>
                    <div class="border-t border-neutral-200 my-1"></div>
                    <!-- Removed dropdown logout link -->
                    
                </div>
            </div>

            <button class="md:hidden text-neutral-600 hover:text-primary transition-colors">
                <i class="fa fa-bars text-xl"></i>
            </button>
        </div>
    </div>
</header>

<!-- 主内容区 -->
<main class="container mx-auto px-4 py-8 md:py-12">
    <!-- 用户信息卡片 -->
    <div class="bg-white rounded-2xl shadow-card mb-8 overflow-hidden animate-fade-in relative">
        <!-- 背景层 -->
        <div class="h-32 bg-gradient-to-r from-primary to-blue-400 absolute w-full top-0 left-0 z-0"></div>

        <!-- 头像层（通过z-index提升层级） -->
        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-10">
            <div class="w-28 h-28 rounded-full border-4 border-white overflow-hidden shadow-2xl">
                <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="w-full h-full object-cover" id="userCenterAvatar">
            </div>
        </div>

        <!-- 编辑封面按钮 -->
        

        <!-- 编辑资料按钮 -->
        <a href="/qian/user-edit.html" class="absolute z-20 bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-all shadow-md hover:shadow-lg flex items-center justify-center" style="top: 50%; left: calc(50% + 80px); transform: translateY(-50%);">
            <i class="fa fa-pencil mr-2"></i> 编辑资料
        </a>
        <a href="/qian/change_password.html" class="absolute z-20 bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-all shadow-md hover:shadow-lg flex items-center justify-center" style="top: 50%; left: calc(50% + 220px); transform: translateY(-50%);">
            <i class="fa fa-lock mr-2"></i> 修改密码
        </a>

        <div class="px-6 pt-20 pb-8">
            <div class="flex flex-col md:flex-row md:items-center justify-between">
                <div>
                    <h2 class="text-2xl font-bold text-neutral-900">张小明</h2>
                    
                    <div class="flex items-center mt-2 space-x-2 flex-wrap">
                        
                    </div>
                </div>

                <!-- 编辑资料按钮 -->
                
            </div>

            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6">
                <div class="bg-neutral-50 rounded-xl p-4 text-center card-hover-effect">
                    <div class="text-2xl font-bold text-neutral-900">15</div>
                    <div class="text-sm text-neutral-500">学习笔记</div>
                </div>
                
                
                
                
            </div>

            
        </div>

        <!-- 编辑资料按钮 -->
        <a href="/qian/user-edit.html" class="absolute z-20 bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-all shadow-md hover:shadow-lg flex items-center justify-center" style="top: 50%; left: calc(50% + 80px); transform: translateY(-50%);">
            <i class="fa fa-pencil mr-2"></i> 编辑资料
        </a>

    </div>


    <!-- 内容选项卡 -->
    <div class="mb-8 animate-fade-in">
        <ul class="nav nav-pills mb-6" id="pills-tab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="pills-articles-tab" data-bs-toggle="pill" data-bs-target="#pills-articles" type="button" role="tab">
                    <i class="fa fa-file-text-o mr-2"></i>我的文章
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="pills-favorites-tab" data-bs-toggle="pill" data-bs-target="#pills-favorites" type="button" role="tab">
                    <i class="fa fa-bookmark-o mr-2"></i>收藏
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="pills-comments-tab" data-bs-toggle="pill" data-bs-target="#pills-comments" type="button" role="tab">
                    <i class="fa fa-comment-o mr-2"></i>评论
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="pills-stats-tab" data-bs-toggle="pill" data-bs-target="#pills-stats" type="button" role="tab">
                    <i class="fa fa-bar-chart mr-2"></i>数据统计
                </button>
            </li>
        </ul>

        <div class="tab-content" id="pills-tabContent">
            <!-- 我的文章 -->
            <div class="tab-pane fade show active" id="pills-articles" role="tabpanel">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-xl font-bold text-neutral-900">我的文章</h3>
                    <a href="/qian/create_article.html" class="bg-primary hover:bg-primary/90 text-white px-4 py-1.5 rounded-lg transition-all text-sm flex items-center">
                        <i class="fa fa-plus mr-1"></i> 发布文章
                    </a>
                </div>

                <div id="userArticlesList" class="space-y-4">
                    <!-- 文章项 -->
                    <!-- User articles will be loaded here by JavaScript -->
                    <p class="text-center text-neutral-500">正在加载我的文章...</p>
                </div>
            </div>

            <!-- 收藏 -->
            <div class="tab-pane fade" id="pills-favorites" role="tabpanel">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-xl font-bold text-neutral-900">我的收藏</h3>
                </div>

                <div class="space-y-4">
                    <!-- 收藏项 -->
                    <div class="bg-white rounded-xl shadow-sm p-4 hover:shadow-card transition-all animate-slide-up" style="animation-delay: 0.1s">
                        <div class="flex flex-col md:flex-row md:items-start">
                            <div class="md:w-1/5 mb-4 md:mb-0">
                                <img src="https://picsum.photos/id/180/400/300" alt="文章封面" class="w-full h-24 md:h-32 object-cover rounded-lg">
                            </div>
                            <div class="md:w-4/5 md:ml-4">
                                <div class="flex items-center space-x-2 text-xs text-neutral-500 mb-2">
                                    <span class="bg-primary/10 text-primary px-2 py-0.5 rounded-full">后端技术</span>
                                    <span>作者: 李工程师</span>
                                    <span>2023-05-05</span>
                                </div>
                                <h4 class="font-bold text-lg mb-2">Node.js 性能优化实战指南</h4>
                                <p class="text-neutral-600 text-sm line-clamp-2 mb-3">本文详细介绍了 Node.js 应用的性能优化方法，包括内存管理、异步处理、集群模式等方面的最佳实践，帮助开发者构建高性能的 Node.js 应用...</p>
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center space-x-4 text-sm text-neutral-500">
                                        <span><i class="fa fa-eye mr-1"></i> 2,341</span>
                                        <span><i class="fa fa-thumbs-o-up mr-1"></i> 215</span>
                                        <span><i class="fa fa-comment-o mr-1"></i> 47</span>
                                    </div>
                                    <button class="text-neutral-500 hover:text-red-500 transition-colors">
                                        <i class="fa fa-bookmark"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white rounded-xl shadow-sm p-4 hover:shadow-card transition-all animate-slide-up" style="animation-delay: 0.2s">
                        <div class="flex flex-col md:flex-row md:items-start">
                            <div class="md:w-1/5 mb-4 md:mb-0">
                                <img src="https://picsum.photos/id/0/400/300" alt="文章封面" class="w-full h-24 md:h-32 object-cover rounded-lg">
                            </div>
                            <div class="md:w-4/5 md:ml-4">
                                <div class="flex items-center space-x-2 text-xs text-neutral-500 mb-2">
                                    <span class="bg-primary/10 text-primary px-2 py-0.5 rounded-full">人工智能</span>
                                    <span>作者: 王博士</span>
                                    <span>2023-04-22</span>
                                </div>
                                <h4 class="font-bold text-lg mb-2">深入浅出神经网络基础</h4>
                                <p class="text-neutral-600 text-sm line-clamp-2 mb-3">本文从最基础的神经元模型开始，逐步介绍神经网络的基本原理、前向传播、反向传播算法，以及常见的神经网络架构，适合对人工智能感兴趣的初学者...</p>
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center space-x-4 text-sm text-neutral-500">
                                        <span><i class="fa fa-eye mr-1"></i> 3,789</span>
                                        <span><i class="fa fa-thumbs-o-up mr-1"></i> 342</span>
                                        <span><i class="fa fa-comment-o mr-1"></i> 68</span>
                                    </div>
                                    <button class="text-neutral-500 hover:text-red-500 transition-colors">
                                        <i class="fa fa-bookmark"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 评论 -->
            <div class="tab-pane fade" id="pills-comments" role="tabpanel">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-xl font-bold text-neutral-900">我的评论</h3>
                </div>

                <div class="space-y-4">
                    <!-- 评论项 -->
                    <div class="bg-white rounded-xl shadow-sm p-4 hover:shadow-card transition-all animate-slide-up" style="animation-delay: 0.1s">
                        <div class="flex items-start">
                            <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="w-10 h-10 rounded-full mr-3">
                            <div class="flex-1">
                                <div class="flex justify-between items-center mb-1">
                                    <h4 class="font-medium text-neutral-900">张小明</h4>
                                    <span class="text-xs text-neutral-500">2023-05-10 14:30</span>
                                </div>
                                <p class="text-neutral-700 text-sm mb-3">非常实用的文章，我在项目中尝试了您提到的方法，确实提高了不少性能。期待您的后续分享！</p>
                                <div class="bg-neutral-50 rounded-lg p-3 text-sm">
                                    <p class="font-medium mb-1">评论文章：React 18 新特性详解与实践指南</p>
                                    <p class="text-neutral-600 line-clamp-1">本文详细介绍了 React 18 的新特性，包括自动批处理、并发渲染、Suspense 等功能...</p>
                                </div>
                                <div class="flex items-center justify-between mt-3">
                                    <div class="flex items-center space-x-4">
                                        <button class="text-neutral-500 hover:text-primary transition-colors text-sm flex items-center">
                                            <i class="fa fa-thumbs-o-up mr-1"></i> 12
                                        </button>
                                        <button class="text-neutral-500 hover:text-primary transition-colors text-sm flex items-center">
                                            <i class="fa fa-reply mr-1"></i> 回复
                                        </button>
                                    </div>
                                    <button class="text-neutral-500 hover:text-red-500 transition-colors text-sm">
                                        <i class="fa fa-trash-o mr-1"></i> 删除
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white rounded-xl shadow-sm p-4 hover:shadow-card transition-all animate-slide-up" style="animation-delay: 0.2s">
                        <div class="flex items-start">
                            <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="w-10 h-10 rounded-full mr-3">
                            <div class="flex-1">
                                <div class="flex justify-between items-center mb-1">
                                    <h4 class="font-medium text-neutral-900">张小明</h4>
                                    <span class="text-xs text-neutral-500">2023-04-29 09:15</span>
                                </div>
                                <p class="text-neutral-700 text-sm mb-3">请问作者，Vue 3 的组合式 API 和选项式 API 各有什么适用场景？在大型项目中应该如何选择？</p>
                                <div class="bg-neutral-50 rounded-lg p-3 text-sm">
                                    <p class="font-medium mb-1">评论文章：Vue 3 组合式 API 最佳实践</p>
                                    <p class="text-neutral-600 line-clamp-1">随着 Vue 3 的普及，组合式 API 成为了开发大型应用的首选方式...</p>
                                </div>
                                <div class="flex items-center justify-between mt-3">
                                    <div class="flex items-center space-x-4">
                                        <button class="text-neutral-500 hover:text-primary transition-colors text-sm flex items-center">
                                            <i class="fa fa-thumbs-o-up mr-1"></i> 5
                                        </button>
                                        <button class="text-neutral-500 hover:text-primary transition-colors text-sm flex items-center">
                                            <i class="fa fa-reply mr-1"></i> 回复
                                        </button>
                                    </div>
                                    <button class="text-neutral-500 hover:text-red-500 transition-colors text-sm">
                                        <i class="fa fa-trash-o mr-1"></i> 删除
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 数据统计 -->
            <div class="tab-pane fade" id="pills-stats" role="tabpanel">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <div class="bg-white rounded-xl shadow-card p-5 animate-slide-up" style="animation-delay: 0.1s">
                        <h3 class="text-lg font-bold text-neutral-900 mb-4">内容数据</h3>
                        <div class="h-64">
                            <canvas id="contentChart"></canvas>
                        </div>
                    </div>

                    <div class="bg-white rounded-xl shadow-card p-5 animate-slide-up" style="animation-delay: 0.2s">
                        <h3 class="text-lg font-bold text-neutral-900 mb-4">互动数据</h3>
                        <div class="h-64">
                            <canvas id="interactionChart"></canvas>
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div class="bg-white rounded-xl shadow-card p-5 animate-slide-up" style="animation-delay: 0.3s">
                        <div class="flex justify-between items-start mb-4">
                            <h4 class="font-bold text-neutral-900">文章分类分布</h4>
                            <div class="text-sm text-neutral-500">共 24 篇</div>
                        </div>
                        <div class="space-y-3">
                            <div>
                                <div class="flex justify-between text-sm mb-1">
                                    <span>前端开发</span>
                                    <span>12 (50%)</span>
                                </div>
                                <div class="w-full bg-neutral-100 rounded-full h-2">
                                    <div class="bg-primary h-2 rounded-full" style="width: 50%"></div>
                                </div>
                            </div>
                            <div>
                                <div class="flex justify-between text-sm mb-1">
                                    <span>JavaScript</span>
                                    <span>6 (25%)</span>
                                </div>
                                <div class="w-full bg-neutral-100 rounded-full h-2">
                                    <div class="bg-blue-400 h-2 rounded-full" style="width: 25%"></div>
                                </div>
                            </div>
                            <div>
                                <div class="flex justify-between text-sm mb-1">
                                    <span>性能优化</span>
                                    <span>4 (16.7%)</span>
                                </div>
                                <div class="w-full bg-neutral-100 rounded-full h-2">
                                    <div class="bg-green-400 h-2 rounded-full" style="width: 16.7%"></div>
                                </div>
                            </div>
                            <div>
                                <div class="flex justify-between text-sm mb-1">
                                    <span>工具链</span>
                                    <span>2 (8.3%)</span>
                                </div>
                                <div class="w-full bg-neutral-100 rounded-full h-2">
                                    <div class="bg-yellow-400 h-2 rounded-full" style="width: 8.3%"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white rounded-xl shadow-card p-5 animate-slide-up" style="animation-delay: 0.4s">
                        <div class="flex justify-between items-start mb-4">
                            <h4 class="font-bold text-neutral-900">阅读分布</h4>
                            <div class="text-sm text-neutral-500">最近 30 天</div>
                        </div>
                        <div class="space-y-3">
                            <div>
                                <div class="flex justify-between text-sm mb-1">
                                    <span>移动端</span>
                                    <span>68%</span>
                                </div>
                                <div class="w-full bg-neutral-100 rounded-full h-2">
                                    <div class="bg-primary h-2 rounded-full" style="width: 68%"></div>
                                </div>
                            </div>
                            <div>
                                <div class="flex justify-between text-sm mb-1">
                                    <span>桌面端</span>
                                    <span>25%</span>
                                </div>
                                <div class="w-full bg-neutral-100 rounded-full h-2">
                                    <div class="bg-blue-400 h-2 rounded-full" style="width: 25%"></div>
                                </div>
                            </div>
                            <div>
                                <div class="flex justify-between text-sm mb-1">
                                    <span>平板</span>
                                    <span>7%</span>
                                </div>
                                <div class="w-full bg-neutral-100 rounded-full h-2">
                                    <div class="bg-green-400 h-2 rounded-full" style="width: 7%"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white rounded-xl shadow-card p-5 animate-slide-up" style="animation-delay: 0.5s">
                        <div class="flex justify-between items-start mb-4">
                            <h4 class="font-bold text-neutral-900">热门文章</h4>
                            <div class="text-sm text-neutral-500">阅读量最高</div>
                        </div>
                        <div class="space-y-4">
                            <div class="flex items-center">
                                <div class="w-8 h-8 bg-primary/10 text-primary rounded-full flex items-center justify-center font-bold text-sm mr-3">1</div>
                                <div class="flex-1">
                                    <h5 class="font-medium text-sm truncate">JavaScript 异步编程深入理解</h5>
                                    <div class="text-xs text-neutral-500">1,562 阅读</div>
                                </div>
                            </div>
                            <div class="flex items-center">
                                <div class="w-8 h-8 bg-primary/10 text-primary rounded-full flex items-center justify-center font-bold text-sm mr-3">2</div>
                                <div class="flex-1">
                                    <h5 class="font-medium text-sm truncate">React 18 新特性详解与实践指南</h5>
                                    <div class="text-xs text-neutral-500">1,245 阅读</div>
                                </div>
                            </div>
                            <div class="flex items-center">
                                <div class="w-8 h-8 bg-primary/10 text-primary rounded-full flex items-center justify-center font-bold text-sm mr-3">3</div>
                                <div class="flex-1">
                                    <h5 class="font-medium text-sm truncate">Vue 3 组合式 API 最佳实践</h5>
                                    <div class="text-xs text-neutral-500">987 阅读</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<!-- 底部区域 -->
<footer class="bg-white border-t border-neutral-200 mt-12">
    <div class="container mx-auto px-4 py-8">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
                <h3 class="text-lg font-bold text-neutral-900 mb-4">StudentHub</h3>
                <p class="text-neutral-600 text-sm mb-4">探索知识，提升能力，与优秀学子共同成长。</p>
                <div class="flex space-x-4">
                    <a href="#" class="text-neutral-500 hover:text-primary transition-colors">
                        <i class="fa fa-github text-xl"></i>
                    </a>
                    <a href="#" class="text-neutral-500 hover:text-primary transition-colors">
                        <i class="fa fa-twitter text-xl"></i>
                    </a>
                    <a href="#" class="text-neutral-500 hover:text-primary transition-colors">
                        <i class="fa fa-linkedin text-xl"></i>
                    </a>
                    <a href="#" class="text-neutral-500 hover:text-primary transition-colors">
                        <i class="fa fa-weibo text-xl"></i>
                    </a>
                </div>
            </div>
        </div>

        <div class="border-t border-neutral-200 mt-8 pt-8 text-center text-neutral-500 text-sm">
            
        </div>
    </div>
</footer>

<!-- 返回顶部按钮 -->
<button id="backToTop" class="fixed bottom-6 right-6 bg-primary/90 hover:bg-primary text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg transition-all transform translate-y-20 opacity-0">
    <i class="fa fa-angle-up text-xl"></i>
</button>

<script src="/jquery-3.7.1.min.js"></script>
<script>
    // Check for user ID in sessionStorage before loading the page
    const userId = sessionStorage.getItem('userId');
    if (!userId) {
        // If userId is not found, redirect to login page
        window.location.href = '/login.html';
    } else {
        // If userId exists, continue with page loading logic
        $(document).ready(function() {

            // Dynamically set the header avatar from sessionStorage
            const userAvatarName = sessionStorage.getItem('avatarUrl'); // Get the avatar filename from sessionStorage using the key 'avatarUrl'
            const headerAvatar = $('#navbar a.rounded-full img'); // Corrected selector for the avatar image in the header
            const avatarBaseUrl = 'http://localhost:8082/upload/';
            if (userAvatarName && headerAvatar.length > 0) {
                headerAvatar.attr('src', avatarBaseUrl + userAvatarName);
            } else {
                // Optionally set a default avatar if not found in session
                headerAvatar.attr('src', 'http://localhost:8082/upload/default.jpg');
            }

            // Dynamically set the user center avatar from sessionStorage
            const userCenterAvatar = $('#userCenterAvatar'); // Get the main avatar image element
            if (userAvatarName && userCenterAvatar.length > 0) {
                 userCenterAvatar.attr('src', avatarBaseUrl + userAvatarName);
            } else {
                 userCenterAvatar.attr('src', 'http://localhost:8082/upload/default.jpg');
            }

            // Control visibility of Admin button based on user role
            const userRole = sessionStorage.getItem('userRole'); // Assuming user role is stored under this key
            const adminButton = $('#adminButton');

            if (userRole === 'ADMIN') {
                adminButton.removeClass('hidden');
            } else {
                adminButton.addClass('hidden');
            }

            // 返回顶部按钮
            window.addEventListener('scroll', function() {
                const backToTopBtn = document.getElementById('backToTop');
                if (window.pageYOffset > 300) {
                    backToTopBtn.classList.remove('translate-y-20', 'opacity-0');
                    backToTopBtn.classList.add('translate-y-0', 'opacity-100');
                } else {
                    backToTopBtn.classList.remove('translate-y-0', 'opacity-100');
                    backToTopBtn.classList.add('translate-y-20', 'opacity-0');
                }
            });

            document.getElementById('backToTop').addEventListener('click', function() {
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            });

            // 导航栏滚动效果
            window.addEventListener('scroll', function() {
                const navbar = document.getElementById('navbar');
                if (window.pageYOffset > 50) {
                    navbar.classList.add('py-2', 'shadow-md');
                    navbar.classList.remove('py-3', 'shadow-sm');
                } else {
                    navbar.classList.add('py-3', 'shadow-sm');
                    navbar.classList.remove('py-2', 'shadow-md');
                }
            });

            // 数据统计图表
            document.addEventListener('DOMContentLoaded', function() {
                // 内容数据图表
                const contentCtx = document.getElementById('contentChart').getContext('2d');
                new Chart(contentCtx, {
                    type: 'line',
                    data: {
                        labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
                        datasets: [{
                            label: '发布文章',
                            data: [2, 3, 4, 6, 5, 4],
                            borderColor: '#165DFF',
                            backgroundColor: 'rgba(22, 93, 255, 0.1)',
                            tension: 0.4,
                            fill: true
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                display: false
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                grid: {
                                    color: 'rgba(0, 0, 0, 0.05)'
                                }
                            },
                            x: {
                                grid: {
                                    display: false
                                }
                            }
                        }
                    }
                });

                // 互动数据图表
                const interactionCtx = document.getElementById('interactionChart').getContext('2d');
                new Chart(interactionCtx, {
                    type: 'bar',
                    data: {
                        labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
                        datasets: [
                            {
                                label: '点赞',
                                data: [12, 28, 45, 68, 92, 128],
                                backgroundColor: '#165DFF',
                                borderRadius: 4
                            },
                            {
                                label: '评论',
                                data: [5, 12, 18, 24, 36, 56],
                                backgroundColor: '#36D399',
                                borderRadius: 4
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                position: 'top',
                                labels: {
                                    boxWidth: 12,
                                    usePointStyle: true,
                                    pointStyle: 'circle'
                                }
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                grid: {
                                    color: 'rgba(0, 0, 0, 0.05)'
                                }
                            },
                            x: {
                                grid: {
                                    display: false
                                }
                            }
                        }
                    }
                });
            });

            // Function to format time ago (reusing from articles_by_tag.html or defining here)
            function timeAgo(timestamp) {
                const now = new Date();
                const past = new Date(timestamp);
                const diffInSeconds = Math.floor((now - past) / 1000);

                if (diffInSeconds < 60) {
                    return diffInSeconds + ' 秒前';
                } else if (diffInSeconds < 3600) {
                    return Math.floor(diffInSeconds / 60) + ' 分钟前';
                } else if (diffInSeconds < 86400) {
                    return Math.floor(diffInSeconds / 3600) + ' 小时前';
                } else if (diffInSeconds < 2592000) { // 30 days
                    return Math.floor(diffInSeconds / 86400) + ' 天前';
                } else if (diffInSeconds < 31536000) { // 365 days
                    return Math.floor(diffInSeconds / 2592000) + ' 个月前';
                } else {
                    return Math.floor(diffInSeconds / 31536000) + ' 年前';
                }
            }

            // 用户文章分页
            let userArticlesCurrentPage = 1;
            const userArticlesPageSize = 6;
            let userArticlesTotalPages = 1;

            // 获取并渲染用户的文章
            function fetchUserArticles(page = 1) {
                const userArticleListContainer = $('#userArticlesList');
                userArticleListContainer.empty(); // Clear existing content
                userArticleListContainer.html(`
                    <div class="text-center py-4 text-neutral-500">
                        <i class="fa fa-spinner fa-spin me-2"></i>正在加载文章...
                    </div>
                `); // Show loading indicator

                const userId = sessionStorage.getItem('userId');
                if (!userId) {
                    userArticleListContainer.html(`<div class="text-center py-4 text-danger">用户未登录，无法加载文章。</div>`);
                    return;
                }

                $.ajax({
                    url: `http://localhost:8082/api/articles/list?authorId=${userId}&page=${page}&limit=${userArticlesPageSize}`,
                    method: 'GET',
                    dataType: 'json',
                    success: function(articles) {
                        userArticleListContainer.empty(); // Clear loading message

                        if (Array.isArray(articles) && articles.length > 0) {
                            renderUserArticles(articles);

                            // Note: Pagination UI will not function correctly without backend providing total pages/count.
                            // To implement full pagination, backend API needs to return total count and pages.
                            // For now, these will reflect only the current page's data.
                            // userArticlesCurrentPage = page; // Keep current page number
                            // userArticlesTotalPages = 1; // Assuming only one page can be shown without total from backend

                            // Pagination UI update (simplified or disabled if no backend total pages)
                            $('#userArticlesCurrentPage').text(page); // Display current page
                            // Hide pagination controls if not supported by backend response or there's only one page
                            if (articles.length < userArticlesPageSize) { // If fewer than page size, assume last page
                                $('#userArticlesNextPageItem').addClass('disabled');
                            } else {
                                $('#userArticlesNextPageItem').removeClass('disabled');
                            }
                            // Previous page is always disabled if page is 1
                            if (page <= 1) {
                                $('#userArticlesPrevPageItem').addClass('disabled');
                            } else {
                                $('#userArticlesPrevPageItem').removeClass('disabled');
                            }
                        } else {
                            userArticleListContainer.html(`<div class="text-center py-4 text-neutral-500">暂无文章</div>`);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('加载用户文章失败:', status, error, xhr.responseText);
                        userArticleListContainer.html(`<div class="text-center py-4 text-danger">加载文章失败，请稍后重试。</div>`);
                    }
                });
            }

            // 渲染用户文章卡片
            function renderUserArticles(articles) {
                const container = $('#userArticlesList');
                container.empty(); // Clear content before rendering

                if (articles.length === 0) {
                    container.html(`<div class="text-center py-4 text-neutral-500">暂无文章</div>`);
                    return;
                }

                articles.forEach(article => {
                    console.log(11,article.status);
                    
                    const statusText = parseInt(article.status) === 1 ? '已发布' : '草稿';
                    const statusClass = parseInt(article.status) === 1 ? 'text-success' : 'text-warning';
                    const articleCard = `
                        <div class="bg-white rounded-xl shadow-md p-4 article-card animate-fade-in relative">
                            <h3 class="text-lg font-semibold text-neutral-900 mb-2 truncate">${article.title}</h3>
                            <p class="text-sm text-neutral-600 mb-3 line-clamp-3">${article.content}</p>
                            <div class="flex items-center text-sm text-neutral-500 mb-3">
                                <i class="fa fa-tag me-1"></i>
                                <span>${article.tagName || '未分类'}</span>
                                <span class="mx-2">|</span>
                                <i class="fa fa-clock-o me-1"></i>
                                <span>${new Date(article.createdAt).toLocaleDateString()}</span>
                                <span class="mx-2">|</span>
                                <span class="${statusClass}">${statusText}</span>
                            </div>
                            <div class="flex items-center justify-end space-x-2">
                                <a href="/qian/article_detail.html?articleId=${article.articleId}" class="text-neutral-500 hover:text-primary transition-colors">
                                    <i class="fa fa-info-circle"></i> 详情
                                </a>
                                <a href="/qian/edit_article.html?articleId=${article.articleId}" class="text-neutral-500 hover:text-primary transition-colors">
                                    <i class="fa fa-pencil"></i> 编辑
                                </a>
                                <button class="text-neutral-500 hover:text-red-500 transition-colors delete-article-btn" data-id="${article.articleId}">
                                    <i class="fa fa-trash-o"></i>
                                </button>
                            </div>
                        </div>
                    `;
                    container.append(articleCard);
                });
            }

            // Pagination event handlers for articles
            $('#userArticlesPrevPageBtn').on('click', function(e) {
                e.preventDefault();
                if (userArticlesCurrentPage > 1) {
                    fetchUserArticles(userArticlesCurrentPage - 1);
                }
            });

            $('#userArticlesNextPageBtn').on('click', function(e) {
                e.preventDefault();
                if (userArticlesCurrentPage < userArticlesTotalPages) {
                    fetchUserArticles(userArticlesCurrentPage + 1);
                }
            });

            // Initial fetch on page load
            fetchUserArticles();

            // Event delegation for delete article button
            $('#userArticlesList').on('click', '.delete-article-btn', function() {
                const articleId = $(this).data('id');
                if (confirm(`确定要删除文章 ID: ${articleId} 吗？`)) {
                    $.ajax({
                        url: `http://localhost:8082/api/articles/${articleId}`,
                        method: 'DELETE',
                        success: function(res) {
                            if (res.code === 200) {
                                alert('文章删除成功！');
                                fetchUserArticles(); // Refresh the article list
                            } else {
                                alert('文章删除失败：' + (res.msg || '未知错误'));
                            }
                        },
                        error: function() {
                            alert('文章删除失败，请稍后重试。');
                        }
                    });
                }
            });

            // Add logout functionality for the button
            $('#logoutButton').on('click', function(e) {
                e.preventDefault(); // Prevent default link behavior
                // Clear session storage
                sessionStorage.removeItem('userId');
                sessionStorage.removeItem('username'); // Assuming username is also stored
                sessionStorage.removeItem('avatarUrl');
                sessionStorage.removeItem('userRole'); // Assuming userRole is also stored

                // Redirect to login page
                window.location.href = '/login.html'; // Replace with your login page path
            });
        });
    }
</script>
</body>
</html>